import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default ({
  namespaced: true,
  state: {
    tabsList: [
      {
        // 默认展示首页标签，所以给予一个初始标签
        // 每次点击菜单跳转的时候会修改数据，这样面包屑导航就可以读取到跳转时的路径，就可以显示出来，产生一个联动效果
        path: '/',
        name: 'layout',
        meta: { title: '工作台' }
      }
    ],
    // 高亮显示的渲染属性，来记录当前选中的路由
    currentMenu: null
  },
  mutations: {
    selectMenu: (state, value) => {
      // 如果点击后的传入数据的页面不是首页
      // console.log(value)
      if (value.name !== 'layout') {
        // 来保存当前页面传入的数据
        state.currentMenu = value
        // findIndex方法为数组中的每一个元素都调用一次函数执行
        // 当数组中的元素在测试条件时返回true时，findIndex()返回符合条件的第一个元素的索引位置
        // 如果没有符合条件的元素返回-1
        const result = state.tabsList.findIndex(item => item.meta.title === value.meta.title) // 判断是否为相同页面，如果有相同页面就不需要新增这个对象数据
        if (result === -1) {
          // 使用push方法将传入的数据加入tablist，push方法会向数组的末尾添加一个或多个元素，并返回新的长度
          state.tabsList.push(value)
          // localStorage.setItem('tag', JSON.stringify(state.tabsList.push(value)))
        }
        // 如果当前页是首页,重置当前页
      } else {
        state.currentMenu = null
      }
    },

    closeTag(state, value) {
      // 当数组中的元素在测试条件时返回true时，findIndex()返回符合条件的第一个元素的索引位置
      const result = state.tabsList.findIndex(item => item.meta.title === value.meta.title)
      // 删除索引所在的位置
      state.tabsList.splice(result, 1)
    }

  }
})
